<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>空之境界</title>
        <style>
            
    .overall{
        width: 900px;
        height: 500px;
        align-items: center;

        margin: 5% auto;        
    }

    .content{
        position: relative;
        height: 400px;
    }

    .content ul{
        list-style-type: none;
    }

    .content ul>li{
        width: 600px;
        height: 300px;

        position: absolute;
        transition: 1s;
        opacity: 0;
    }
    .content ul>li img{    
      
        width: 964px;
        height: 1330px;
        border-radius: 5%;
        border: 5px solid #0e0600;        
    }

  
    .content ol{
    
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, 75px);
        grid-template-rows: auto;

        grid-gap: 1em;
        gap:1em;
        float: right;
        margin-top: 450px;
        list-style: none;
        top: 0;
        left: 0;
    }

    .content ol li{
        width: 25px;
        height: 10px;
        font-size: 15px;
        line-height: 20px;
        float: left;
        text-align: center;
        border-radius: 2em;
        border: 5px solid #af9d9d;
    }
    h1 { 
        text-align: center;
       color: aliceblue;
    }
            .head{
                position: relative;
                height: 350px;
            }
           
            .center{
                position: absolute;
                width: 100%;
                top: 40%;
                text-align: center;
                color: ivory;
                font-size: 50px;
              
            }
            ul{
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color:black;
            }
            li{
                display: inline-block;
                border-right: 1px solid black;
            }
            li a, .dropbtn{
                display: inline-block;
                color: burlywood;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-weight: bold;
                font-size: x-large;
            }
            li a:hover, .dropbtn:hover{
                background-color: darkcyan;
            }
            li.dropdown{
                display: inline-block;
            }
            .dropdown-content{
                display: none;
                position: absolute;
                background-color: azure;
                box-shadow: 0px 8px 16px 0px;
                z-index: 1;
            }
            .dropdown-content a{
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
                text-align: left;
            }
            .dropdown-content a:hover{
                background-color: darkgrey;
            }
            .dropdown:hover .dropdown-content{
                display: block;
            }
            main{
                background-color:black;
            }
</style>
    </head>
<body>
</head>
<body>
    <header>
        <div class="head">
            <img width="100%" height="350px" src="1.jpg">

        </div>
        </div>
        <topnav>
            <ul>
                <li>
                    <a href="index.html">TYPE-MOON</a>
                </li>
                <li>
                    <a href="https://www.karanokyoukai.com/">空之境界</a>
                </li>
                <li class="dropdown">
                    <div class="dropbtn">fate </div>
                    <div class="dropdown-content">
                        <a href="https://b23.tv/ep239622">saber篇</a>
                        <a href="https://www.bilibili.com/bangumi/play/ep67704?from_spmid=666.25.episode.0&from_outer_spmid=333.337.0.0">无限剑制篇</a>
                        <a href="https://www.bilibili.com/bangumi/play/ss26703?theme=movie&spm_id_from=333.337.0.0">天之杯篇</a>
                    </div>
                </li>
                <li>
                    <a href="http://typemoon.com/products/tsukihime/">月姬R</a>
                </li>
                <li>
                    <a href="http://typemoon.com/products/mahoyo/windows/">魔法使之夜</a>
                </li>
                <li style="float:right">
                    <a class="active" href="1.html">了解更多</a>
                </li>
            </ul>
        </topnav>
    </header>
    <main>
<h1>空之境界各章海报</h1>

    <div class="overall">
        <div class="content">
            <ul>
                <li><img src="chapterKV01.jpg" alt=""></li>
                <li><img src="chapterKV02.jpg" alt=""></li>
                <li><img src="chapterKV03.jpg" alt=""></li>
                <li><img src="chapterKV04.jpg" alt=""></li>
                <li><img src="chapterKV05.jpg" alt=""></li>
                <li><img src="chapterKV06.jpg" alt=""></li>
                <li><img src="chapterKV07.jpg" alt=""></li>
            </ul>
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>        
    </div>
</main>
    <script>
        window.onload = function()
        {
        var content = this.document.getElementsByClassName("content")[0];

        var li = content.getElementsByTagName("li");

        function fun(i, j)
        {    
            li[i].style.opacity=1;
            li[j].style.opacity=0;
            li[i + 7].style.backgroundColor = "#ffffff";
            li[j + 7].style.backgroundColor = "#00000000";
        }
    
      
        fun(0, 1);
        var i = 0;
        function auto()
        {
            i ++;
        
            if(i >= 7)
            {
        
                i = 0;
              
                fun(0, 2);
            }
            else
            {
         
                fun(i, i - 1);
            } 
        }
        timer = this.setInterval(auto, 2000);
        content.onmouseover = function () 
        { 
            clearInterval(timer);
        }
    
        content.onmouseout = function () 
        { 
            timer = setInterval(auto, 2000);
        }
        var j = 0;
        for(; j < 7; j++)
        {
            li[j + 7].index = j;
            li[j + 7].onclick = function()
            {
                fun(this.index, i)
                i = this.index;
            }
        }
    }
    //java代码来自http://t.csdn.cn/plrGI
    </script>
    </html>
</body>
</html>
